<template>
    <div style="text-align:center;" >
        <div class = "borderimg" id="round">这里，图像平铺（重复）来填充该区域。</div>
        <br>
        <div class = "borderimg" id="stretch">这里，图像被拉伸以填充该区域。</div>
    </div>

</template>

<script>
    export default {
        name: "index.vue"
    }
</script>

<style>
    .borderimg
    {
        border:15px solid transparent;
        width:250px;
        padding:10px 20px;
    }

    #round
    {
        -webkit-border-image:url(https://www.runoob.com/images/border.png) 30 30 round; /* Safari 5 and older */
        -o-border-image:url(https://www.runoob.com/images/border.png) 30 30 round; /* Opera */
        border-image:url(https://www.runoob.com/images/border.png) 30 30 round;
    }

    #stretch
    {
        -webkit-border-image:url(https://www.runoob.com/images/border.png) 30 30 stretch; /* Safari 5 and older */
        -o-border-image:url(https://www.runoob.com/images/border.png) 30 30 stretch; /* Opera */
        border-image:url(https://www.runoob.com/images/border.png) 30 30 stretch;
    }
</style>